<template>
  <Layout>
    <Spin fix v-if="isSpin">
      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
      <div>正在生成导出文件，请稍后</div>
    </Spin>
    <Form ref="form1" :model="form1" :label-width="120">
      <Row class="query-form" style="padding-top: 15px">
        <Col span="8">
          <FormItem label="队伍所属单位：" prop="orgId">
            <!--            <cascaderDom class="query-form-el" style="padding-top: 4px;width: 100%;" ref="childConOrg"
                                     @setOrgInfo="setQueryOrgId" @setOrgname="setQueryOrgName"
                                     :currentOrgId="currentOrgId"
                                     :currentOrgName="currentOrgName" :orgTree="true"></cascaderDom>-->
            <company-select v-model="form1.companyName" class="query-form-el"></company-select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="二级集团：">
            <two-level-org org-code v-model="form1.twoLevelOrgId"></two-level-org>
          </FormItem>
        </Col>

        <Col span="8" v-show="!switchFlag">
          <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
        <Col span="8" v-show="switchFlag">
          <FormItem label="擅长事故：" prop="accident">
            <Select v-model="form1.accidents" multiple :max-tag-count="2" @on-change="selectAccidents"
                    style="width: 100%;">
              <Option v-for="item in accidents" :value="item.codingCodeId"
                      :key="item.codingCodeId">{{ item.codingName }}
              </Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8">
          <FormItem label="响应级别：" prop="resLevelId">
            <Select v-model="form1.resLevels" multiple :max-tag-count="2" @on-change="selectResLevel"
                    style="width: 100%;">
              <Option v-for="item in resLevels" :value="item.codingCodeId"
                      :key="item.codingCodeId">{{ item.codingName }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8" offset="8">
          <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
          <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
          <Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="downloadFile">导出</Button>
          <!--<Button size="large"  class="ivu-btn-delete" icon="md-trash" @click="batDelete">删除</Button>-->
        </Col>
      </Row>
    </Form>

    <Table ref='table' :height="tableHeight" :loading="loading" no-data-text="没有查询到相关数据!" @on-sort-change="querySort"
           @on-selection-change='getSelectRows'
           border :columns="columns1" :data="dataTable" size="small">
    </Table>


    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
              @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
              show-total show-sizer show-elevator/>
      </Col>
    </Row>

    <Modal title="新增救援队伍信息" :transfer=false v-model="model1" :width=600 @on-cancel="handleCancel">
      <Row>
        <Col span="24">
          <Form ref="form1datacopy" :model="form1datacopy" :rules="ruleCustom" label-position="top">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="队伍名称：" prop="teamName">
                  <Input type="text" v-model="form1datacopy.teamName"></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="队伍性质：" prop="teamTypeId">
                  <Select filterable v-model="form1datacopy.teamTypeId">
                    <Option v-for="item in teamTypes" :value="item.codingCodeId"
                            :key="item.codingCodeId">{{ item.codingName }}
                    </Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="所属单位：">
                  <cascaderDom ref="childOrg" @setOrgInfo="setOrgId" @setOrgname="setOrgName"
                               :currentOrgId="currentOrgId"
                               :currentOrgName="currentOrgName" :orgTree="true"></cascaderDom>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="响应级别：" prop="resLevelId">
                  <Select filterable v-model="form1datacopy.resLevelId">
                    <Option v-for="item in resLevels" :value="item.codingCodeId"
                            :key="item.codingCodeId">{{ item.codingName }}
                    </Option>
                  </Select>
                </FormItem>
              </Col>

            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="负责人：" prop="contactorId">
<!--                  <Select-->
<!--                      v-model="form1datacopy.contactorId"-->
<!--                      filterable-->
<!--                      :remote-method="remoteMethod1"-->
<!--                      :loading="loading1">-->
<!--                    <Option v-for="(option, index) in options1" :value="option.userId"-->
<!--                            :label="option.userName" :key="index">-->
<!--                      <span>{{ option.userName }}</span>-->
<!--                      <span style="float:right;color:#ccc">{{ option.orgInfo.orgName }}</span>-->
<!--                    </Option>-->
<!--                  </Select>-->

                  <Input type="text"  readonly v-model="form1datacopy.contactorName">
                    <!--@on-focus="model4=true"-->
                    <Button slot="append" @click="model4=true" icon="ios-search"></Button>
                  </Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="负责人电话：" prop="cellPhone">
                  <Input type="text" v-model="form1datacopy.cellPhone"></Input>
                </FormItem>
              </Col>


            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="建队时间：" prop="setupDate">
                  <DatePicker type="date" format="yyyy-MM-dd" :value="form1datacopy.setupDate"
                              v-model="form1datacopy.setupDate" style="width: 100%"
                              placeholder="请选择"></DatePicker>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="办公室电话：" prop="officeTel">
                  <Input type="text" v-model="form1datacopy.officeTel"></Input>
                </FormItem>
              </Col>
            </Row>

            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="定编人数：" prop="teamSize">
                  <Input type="text" v-model="form1datacopy.teamSize"></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="擅长事故：" prop="accident">
                  <Select filterable v-model="form1datacopy.accident">
                    <Option v-for="item in accidents" :value="item.codingCodeId"
                            :key="item.codingCodeId">{{ item.codingName }}
                    </Option>
                  </Select>
                </FormItem>
              </Col>

            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label="队伍地址：" prop="teamAddress">
                  <Input v-model="form1datacopy.teamAddress" type="textarea" :rows="2"/>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label="备注：" prop="notes">
                  <Input v-model="form1datacopy.notes" type="textarea" :rows="2"/>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="primary" class='ivu-btn-save' :loading="buttonLoading" @click="submit('form1datacopy')">
          确定
        </Button>
        <Button type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
      </div>
    </Modal>
    <Modal title="应急队伍详情" class="modal-view-detail" :transfer=false v-model="model2" :width=800>
      <Row>
        <Col span="24">
          <Form :model="showdata" :label-width="160">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="队伍名称：" prop="reportDate">
                  {{ showdata.teamName }}
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="队伍性质：" prop="operateOrg">
                  {{ showdata.teamTypeName }}
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="所属单位：" prop="workType">
                  {{ showdata.belongOrgName }}
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="负责人：" prop="workGrade">
                  {{ showdata.contactorName }}
                </FormItem>
              </Col>

            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="响应级别：" prop="planStartTime">
                  {{ showdata.resLevelName }}
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="建队时间：" prop="planEndTime">
                  {{ showdata.setupDate }}
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="移动电话：" prop="planName">
                  {{ showdata.cellPhone }}
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="办公室电话：" prop="reportUserName">
                  {{ showdata.officeTel }}
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="定编人数：" prop="telephone">
                  {{ showdata.teamSize }}
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="擅长事故：" prop="accidentName">
                  {{ showdata.accidentName }}
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label="队伍地址：" prop="operateContent">
                  {{ showdata.teamAddress }}
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label="备注：" prop="notes">
                  {{ showdata.notes }}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button class='ivu-btn-save' @click="model2=false">关闭</Button>
      </div>
    </Modal>

    <Modal :transfer=false footer-hide v-model="model4" :width=900>
      <userManager :model="true" :companyId="companyId" @getSelectModelData="getSelectModelData">
      </userManager>
    </Modal>
  </layout>
</template>

<script>
import {Api} from '../../../../api/index.js'
import cascaderDom from "../../../../components/cascader-dom.vue"
import {sessionStorage} from '../../../../common/cacheUtils.js';
import userManager from '../../../base/authorityManager/userManager'
import {formatDate} from "@/tools";

export default {
  components: {
    cascaderDom,userManager
  },
  data() {
    return {
      isSpin: false,
      switchFlag: false,
      form1: {},
      options1: [],
      //分页参数
      pageSizeArray: [10, 20, 50],
      companyId: sessionStorage('userId').getObject('userId').companyId,
      model4: false,
      pagedata: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      columns1: [
        {
          title: "序号",
          width: 80,
          align: "center",
          fixed: 'left',
          render: (h, params) => {
            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
          }
        },
        {
          width: 150,
          title: '队伍名称',
          key: 'teamName',
          align: 'center'
        },

        {
          width: 150,
          title: '队伍类别',
          key: 'teamTypeName',
          align: 'center'
        },

        {
          title: '所属单位',
          key: 'belongOrgName',
          minWidth: 100,
          align: 'center'
        },
        {
          width: 150,
          title: '联系人',
          key: 'contactorName',
          align: 'center'
        },
        {
          width: 150,
          title: '响应级别',
          key: 'resLevelName',
          align: 'center'
        },
        {
          width: 150,
          title: '擅长事故',
          key: 'accidentName',
          align: 'center'
        },
        {
          width: 150,
          title: '定编人数',
          key: 'teamSize',
          align: 'center'
        },
        {
          title: '建队日期',
          align: 'center',
          minWidth: 120,
          key: 'setupDate',
          sortable: 'custom',
          render: (h, params) => {
            return h('div', [
              (this.formatDate(new Date(params.row.setupDate), 'yyyy-MM-dd'))
            ]);
          }
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('A', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '14px'
                },
                on: {
                  click: () => {
                    this.showData(params, 1);
                  }
                }
              }, '详情'),
              h('Divider', {
                props: {
                  type: 'vertical',
                }
              }, ''),
              h('A', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '14px',
                },
                on: {
                  click: () => {
                    this.showData(params, 2);
                  }
                }
              }, '修改'),
              h('Divider', {
                props: {
                  type: 'vertical',
                }
              }, ''),
              h('A', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '14px',
                  color: 'red'
                },
                on: {
                  click: () => {

                    this.$Modal.confirm({
                      title: '数据删除',
                      content: '<p>确定删除该条信息</p>',
                      okText: '确认',
                      onOk: () => {
                        this.deleteData(params);
                      },
                      cancelText: '取消'
                    });

                  }
                }
              }, '删除')
            ]);
          }
        }
      ],
      currentOrgId: '',
      currentOrgName: '',
      setCurrentName: {},
      ruleCustom: {
        operateOrg: [
          {required: true, message: '  ', trigger: 'change'}
        ],
        teamTypeId: [
          {required: true, message: '  ', trigger: 'change'}
        ],
        workGrade: [
          {required: true, message: '  ', trigger: 'change'}
        ],
        contactorId: [
          {required: true, message: '  ', trigger: 'change'}
        ],
        cellPhone: [{
          validator: (rule, value, callback) => {
            if (!(/^1[3456789]\d{9}$/.test(value))) {
              callback(' ');
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
        planStartTime: [
          {required: true, type: 'date', message: '  ', trigger: 'change'}
        ],
        planEndTime: [
          {required: true, type: 'date', message: '  ', trigger: 'change'}
        ],
        teamName: [
          {required: true, message: '  ', trigger: 'blur'}
        ]
      },
      form1datacopy: {
        operateOrg: '',
        workType: '',
        workGrade: '',
        planStartTime: new Date(),
        planEndTime: new Date(),
        planName: ''
      },
      teamTypes: [],
      accidents: [],
      resLevels: [],
      dataTable: [],
      showdata: {},
      model1: false,
      buttonLoading: false, model2: false,
      add: false,
      tableHeight: 10, loading: false,
      deleteRows: [],
      loading1: false,
    }
  },
  mounted: function () {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
    this.selectCodingSort();
    this.query();
  },
  methods: {
    switchQuery(flag) {
      this.switchFlag = flag;
      if (!this.switchFlag) {
        this.tableHeight = window.innerHeight - 220;
      } else {
        this.tableHeight = window.innerHeight - 315;
      }
    },
    selectAccidents(value) {
      this.form1.accidentList = value.join();
    },
    selectResLevel(value) {
      this.form1.resLevelList = value.join();

    },
    remoteMethod1(query) {
      if (query !== '') {
        clearTimeout(this.remoteMethod1.timer);
        this.remoteMethod1.timer = setTimeout(() => {
          this.options1.splice(0, this.options1.length);
          this.loading1 = true;
          let data = {
            userName: query,
            orgId: sessionStorage('userId').getObject('userId').companyId
          };
          this.$http.get(Api.queryUserByUserName, {params: data}).then((res) => {
            this.loading1 = false;
            res.data.data.forEach(item => {
              this.options1.push(item);
            })

          }).catch(e => {
            this.loading1 = false;
          })
        }, 200);
      } else {
        this.options1 = [];
      }
    },
    selectCodingSort() {
      this.$http.get(Api.queryCodeDetailBySortId + '/STY-000011', {params: {}}).then((res) => {
        this.teamTypes = res.data.data;
      })
      this.$http.get(Api.queryCodeDetailBySortId + '/STY-000012', {params: {}}).then((res) => {
        this.accidents = res.data.data;
      })
      this.$http.get(Api.queryCodeDetailBySortId + '/RL-000011', {params: {}}).then((res) => {
        this.resLevels = res.data.data;
      })
    },
    getSelectModelData(row) {
      this.form1datacopy.contactorId = row.userId;
      this.form1datacopy.contactorName = row.userName;
      this.model4 = false;
    },
    setQueryUserName(data) {
      this.form1.reportUserName = data;
    },
    setQueryUserId(data) {
      this.form1.reportUserId = data[data.length - 1];
    },
    setQueryOrgId(data) {
      this.form1.companyId = data[data.length - 1];
    },
    setQueryOrgName(data) {
      this.form1.companyName = data;
    },
    setUserName(data) {
      this.form1datacopy.reportUserName = data;
    },
    setUserId(data) {
      this.form1datacopy.contactorId = data[data.length - 1];
    },
    setOrgId(data) {
      this.form1datacopy.belongOrgId = data[data.length - 1];
    },
    setOrgName(data) {
      this.form1datacopy.operateOrg = data;
    },
    pageChange(pageNum) {
      this.pagedata.currentPage = pageNum;
      this.query();
    },
    pageSizeChange(pageSize) {
      this.pagedata.pageSize = pageSize;
      this.query();
    },

    copyArray(arr) {
      return JSON.parse(JSON.stringify(arr));
    },

    showData(data, flag) {
      this.currentOrgId = data.row.belongOrgId;
      this.currentOrgName = data.row.belongOrgName;
      this.setCurrentName = {value: data.row.contactorId, label: data.row.contactorName};

      if (flag == 1) {
        //查看页面
        this.showdata = data.row;
        if (this.showdata.setupDate) {
          this.showdata.setupDate = this.formatDate(new Date(this.showdata.setupDate), 'yyyy-MM-dd');
        }
        this.model2 = true;
      } else {
        //修改页面
        this.options1 = [];
        this.options1.push({userId: data.row.contactorId, userName: data.row.contactorName, orgInfo: {orgName: ''}});
        this.form1datacopy = JSON.parse(JSON.stringify(data.row));
        this.model1 = true;
        this.add = false;
      }
    },

    getSelectRows(rows) {
      this.deleteRows = rows;
    },
    batDelete() {
      let planId = '';
      this.deleteRows.forEach(item => {
        planId += (item.teamId + ";")
      });
      planId = planId.substring(0, planId.length - 1);

      let url = Api.deleteRescueTeam;
      this.$http.get(url, {params: {objId: planId}}).then((res) => {
        this.$Message.success('成功');
        this.query()
      }).catch(e => {
        this.$Message.error('请求失败' + e);
      })
    },
    deleteData(params) {
      let url = Api.deleteRescueTeam;
      this.$http.get(url, {params: {objId: params.row.teamId}}).then((res) => {
        this.$Message.success('成功');
        this.query()
      }).catch(e => {
        this.$Message.error('请求失败' + e);
      })
    },

    query() {
      this.loading = true;
      let data = {
        currentPage: this.pagedata.currentPage,
        size: this.pagedata.pageSize,
        orgId: sessionStorage('userId').getObject('userId').companyId,
        type: this.$route.query.id
      }

      if (this.form1.reportDate != '' && this.form1.reportDate != undefined) {
        this.form1.reportDate = this.formatDate(new Date(this.form1.reportDate), 'yyyy-MM-dd');
      } else {
        delete this.form1['reportDate'];
      }
      data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));

      let url = Api.queryRescueTeam;
      this.$http.get(url, {params: data}).then((res) => {
        this.dataTable = res.data.data;
        this.pagedata.total = res.data.totalSize;
        this.loading = false;
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },
    reset() {
      this.form1 = {}
      // this.$refs.childConOrg.resetCurrentOrg();
      this.query();
    },
    handleCancel() {
      this.form1datacopy = {};
      this.model1 = false;
    },
    submit(name) {
      this.$refs[name].validate((valid) => {

        let a = 1
        if (valid) {
          let userId = sessionStorage('userId').getObject('userId').userId;
          let orgId = sessionStorage('userId').getObject('userId').orgInfo.orgId;
          this.form1datacopy.emeType = this.$route.query.id;
          if (this.add) {
            this.form1datacopy.createOrgId = orgId;
            this.form1datacopy.createUserId = userId;
          } else {
            this.form1datacopy.updateOrgId = orgId;
            this.form1datacopy.updateUserId = userId;
          }
          this.buttonLoading = true
          this.$http.post(Api.emRescueTeam, this.form1datacopy).then((res) => {
            this.$Message.success("保存成功")
            this.model1 = false;
            this.query();
            this.buttonLoading = false
          }).catch(e => {
            this.model1 = false;
            this.query();
            this.buttonLoading = false
            this.$Message.error("数据获取失败")
          })
        } else {
          this.$Message.error('请填报完整!');
        }
      })
    },
    addInfo() {
      this.add = true
      this.form1datacopy = {};
      this.currentOrgId = '';
      this.currentOrgName = '';
      this.setCurrentName = {};
      this.form1datacopy.reportDate = new Date();
      this.model1 = true;
    },
    formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ('00' + str).substr(str.length);
    },
    querySort({column, key, order}){
      this.form1.key = key;
      this.form1.order = order;
      this.query();
    },
    downloadFile() {
      let data = {
        orgId: sessionStorage('userId').getObject('userId').companyId,
        type: this.$route.query.id
      }
      if (this.form1.reportDate != '' && this.form1.reportDate != undefined) {
        this.form1.reportDate = this.formatDate(new Date(this.form1.reportDate), 'yyyy-MM-dd');
      } else {
        delete this.form1['reportDate'];
      }
      data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));
      this.isSpin = true;
      this.$http.get(Api.queryRescueTeam + '/export', {
        params:data,
        responseType: 'blob'      //告诉服务器我们需要的响应格式
      }).then((res) => {
        const aLink = document.createElement("a");
        let blob = new Blob([res.data], {
          type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
        });
        aLink.href = URL.createObjectURL(blob)
        aLink.download = "应急队伍("+ formatDate(new Date(), "yyyy-MM-dd")+ ").xlsx" //标题
        aLink.click()
        document.body.appendChild(aLink)
        this.isSpin = false;
      })
    },
  },
  watch: {
    "model1": function (qw, er) {
      if (qw && this.model1) {
        setTimeout(() => {
          this.$refs.childOrg.setCurrentOrg();
        }, 100)
      } else {
        this.$refs.childOrg.resetCurrentOrg();
      }
    },

  },
}
</script>
<style lang='css' scoped>
@import '../../../../index.css';

</style>
